<template>
  <div class="range-input">
    <a-input-number v-model:value="value[0]" :placeholder="minPlaceholder" :min="min" class="range-item" />
    <div class="split-line"></div>
    <a-input-number
      v-model:value="value[1]"
      :placeholder="maxPlaceholder"
      :min="value[0]"
      :max="max"
      class="range-item"
    />
  </div>
</template>

<style scoped>
.range-input {
  display: inline-flex;
  align-items: center;
  background: #fafafa;
  gap: 8px;
}

.split-line {
  width: 16px;
  height: 2px;
  background: #d9d9d9;
  position: relative;
}

.range-item {
  width: 100%;
  transition: all 0.3s cubic-bezier(0.3, 0, 0.5, 1);
}
</style>

<script lang="ts" setup>
defineProps({
  value: {
    type: Array as () => number[],
    required: true,
  },
  min: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: Infinity,
  },
  minPlaceholder: String,
  maxPlaceholder: String,
})
</script>
